
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Layabox</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/header.css">
    <link rel="stylesheet" href="./assets/css/footer.css">
</head>
<body>
    <header class="header">
      <div class="content">
        <nav class="navbar navbar-inverse">
          <div class="navList container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="logo navbar-brand" href="#">
                  <img class="wow fadeInLeft" src="./assets/images/logo.png" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="head_list nav navbar-nav wow fadeInUp">
                <li class="active"><a href="#" data-lang="menu1">首页</a></li>
                <li><a href="#newlist" data-url="newlist" data-lang="menu2">Laya引擎</a></li>
                <li><a href="#newlist2" data-url="newlist2" data-lang="menu3">Laya优势</a></li>
                <li><a href="#newlist3" data-url="newlist3" data-lang="menu4">Laya产品家族</a></li>
                <li><a href="#newlist4" data-url="newlist4" data-lang="menu5">Laya中心</a></li>
            </ul>
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle wow fadeInUp" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a onclick="SelectLang('zh')" href="javascript:void(0)">中文</a></li>
                    <li><a onclick="SelectLang('en')" href="javascript:void(0)">English</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </header>
    <div id="carousel-example-generic" class="banner carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <div class="banner-img carousel-inner" role="listbox">
        <div class="item active">
          <img class="img-responsive" src="./assets/images/qqw.jpg" >
        </div>
        <div class="item">
          <img class="img-responsive" src="./assets/images/abc.jpg" >
        </div>
        <div class="item">
          <img class="img-responsive" src="./assets/images/sda.jpg">
        </div>
      </div>
    
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">left</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">right</span>
      </a>
    </div>


  <div class="layaflash">
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="left col-md-6">
            <div class="title">
              <div class="big wow fadeInUp" id="newlist" data-lang="aa">LayaFlash 引擎</div>
              <div class="small wow fadeInUp" ata-wow-delay="200ms" data-lang="a1">让Flash技术变成开发HTML5产品的利器</div>
            </div>
            <div class="container">
              <div class="row">
                <div class="icon col-md-6 wow fadeInUp" ata-wow-delay="200ms">
                  <div class="img">
                    <img src="./assets/images/layaflash-icon01.png" alt="">
                  </div>
                  <div class="title">
                    <p class="big" data-lang="a2">快速Flash产品转换</p>
                    <p class="small" data-lang="a3">Flash页游\手游仅需1个人7天即可
                      转换为HTML5和APP游戏</p>
                  </div>
                </div>
                <div class="icon col-md-6 wow fadeInUp" ata-wow-delay="200ms">
                  <div class="img">
                    <img src="./assets/images/layaflash-icon02.png" alt="">
                  </div>
                  <div class="title">
                    <p class="big">LayaFlash IDE</p>
                    <p class="small" data-lang="a4">支持代码编译、调试、压缩与混淆
                      加密、资源转换、在线文档等功能</p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="icon col-md-6 wow fadeInUp" ata-wow-delay="300ms">
                  <div class="img">
                    <img src="./assets/images/layaflash-icon03.png" alt="">
                  </div>
                  <div class="title">
                    <p class="big" data-lang="a5">HTML5零学习成本</p>
                    <p class="small" data-lang="a6">AS3开发者可直接使用Flash开源框
                      架和工具链进行开发HTML5</p>
                  </div>
                </div>
                <div class="icon col-md-6 wow fadeInUp" ata-wow-delay="300ms">
                  <div class="img">
                    <img src="./assets/images/layaflash-icon04.png" alt="">
                  </div>
                  <div class="title">
                    <p class="big" data-lang="a7">性能媲美APP</p>
                    <p class="small" data-lang="a8">LayaFlash引擎的重度游戏已运行于
                      QQ空间等平台，性能媲美APP</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right col-md-6">
            <img class="wow fadeInUp" ata-wow-delay="300ms" src="./assets/images/Layaflash.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="advantage">
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="left col-md-4">
            <div class="img">
              <img class="wow fadeInLeft" ata-wow-delay="200ms" src="./assets/images/advantage-img.png" alt="">
            </div>
          </div>
          <div class="right col-md-8">
            <div class="title wow fadeInUp" ata-wow-delay="200ms" id="newlist2" data-lang="newlist-title">Layabox 优势</div>
            <div class="list">
              <div class="item wow fadeInUp" ata-wow-delay="200ms">
                <div class="img">
                  <img src="./assets/images/advantage-icon01.png" alt="">
                </div>
                <p class="popp" data-lang="newlist1">快速上手，Flash程序员3小时掌握HTML5开发</p>
              </div>
              <div class="item wow fadeInUp" ata-wow-delay="230ms">
                <div class="img">
                  <img src="./assets/images/advantage-icon02.png" alt="">
                </div>
                <p class="popp" data-lang="newlist2">4年优化打磨，LayaPlayer运行器性能媲美APP</p>
              </div>
              <div class="item wow fadeInUp" ata-wow-delay="260ms">
                <div class="img">
                  <img src="./assets/images/advantage-icon03.png" alt="">
                </div>
                <p class="popp" data-lang="newlist3">超5亿的LayaPlayer移动设备安装量帮助CP发行</p>
              </div>
              <div class="item wow fadeInUp" ata-wow-delay="290ms">
                <div class="img">
                  <img src="./assets/images/advantage-icon04.png" alt="">
                </div>
                <p class="popp" data-lang="newlist4">使用LayaFlash开发大型HTML5游戏的企业超100家</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="family"id="newlist3" >
    <div class="content">
      <div class="title wow fadeInUp" ata-wow-delay="200ms" data-lang="b1">Layabox产品家族</div>
      <div class="list container">
        <div class="row">
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="240ms">
            <div class="img">
              <img src="./assets/images/family-icon01.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaAir</div>
              <div class="small" data-lang="b2">核心库仅100K左右的新一代HTML5引擎，支持AS3\TS\JS语言开发，支持2D\3D，非运行器模式下性能媲美APP。</div>
            </div>
          </div>
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="240ms">
            <div class="img">
              <img src="./assets/images/family-icon02.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaPublish</div>
              <div class="small" data-lang="b3">Layabox发行业务，通过在H5产业链中的技术
                桥梁优势，帮助CP获得流量支持。</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="260ms">
            <div class="img">
              <img src="./assets/images/family-icon03.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaFlash</div>
              <div class="small" data-lang="b4">使用Flash AS3语言开发H5的引擎框架，可直
                接在FB或FD中开发、调试、编译H5，也可快
                速将Flash页游\手游转换成H5游戏。</div>
            </div>
          </div>
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="260ms">
            <div class="img">
              <img src="./assets/images/family-icon04.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaStore</div>
              <div class="small" data-lang="b5">嵌入式HTML5商城，APP只需嵌入20K的SDK
                即可以获得托管式HTML5商店服务，进入流量
                获利新时代。</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="300ms">
            <div class="img">
              <img src="./assets/images/family-icon05.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaPlayer</div>
              <div class="small" data-lang="b6">HTML5高速运行器，性能卓越、支持大型
                HTML5游戏流畅运行，目前已植入QQ、百度
                等20多家主流平台，安装量超5亿。</div>
            </div>
          </div>
          <div class="item col-md-6 wow fadeInUp" ata-wow-delay="300ms">
            <div class="img">
              <img src="./assets/images/family-icon06.png" alt="">
            </div>
            <div class="text">
              <div class="big">LayaOpen</div>
              <div class="small" data-lang="b7">Layabox开放平台，整合了Laya提供的各项运
                营，管理服务的服务，提供给游戏提供商和互
                联网渠道的统一开放平台。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 <div class="player"> 
    <div class="content">
      <div class="title">
        <div class="left wow fadeInUp" ata-wow-delay="200ms" id="newlist4" data-lang="b8">采用Layabox引擎的精彩游戏</div>
        <div class="right">
          <a class="wow fadeInUp" ata-wow-delay="200ms" href="javascript:void(0)" data-lang="b9">更多</a>
        </div>
      </div>
      <div class="list">
        <div class="videobox wow fadeInUp" ata-wow-delay="240ms">
          <video  id="video" class="video" controls>
            <source src="./assets/images/player01.mp4" />
          </video>  
          <div id="videoBtn"></div>
        </div>
        <div class="right container">
          <div class="row">
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon01.png" alt="">
              <p  data-lang="c1" class="add">猎刃2</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon02.png"  alt="">
              <p data-lang="c2" class="add">上吧主公</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon03.png" alt="">
              <p data-lang="c3" class="add">醉西游</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon04.png" alt="">
              <p data-lang="c4" class="add">魔卡幻想</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon05.png" alt="">
              <p data-lang="c5" class="add">超能战队</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
              <img src="./assets/images/palyer-icon06.png" alt="">
              <p data-lang="c6" class="add">刀塔大菠萝</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/palyer-icon07.png" alt="">
              <p data-lang="c7" class="add">轰三国</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/palyer-icon08.png" alt="">
              <p  class="add" data-lang="c8">迷你猎人</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/player-icon09.png" alt="">
              <p data-lang="c9" class="add">萌挂三国</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/player-icon10.png" alt="">
              <p data-lang="c10" class="add">夺塔三国</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/player-icon11.png" alt="">
              <p data-lang="c11" class="add">英雄争霸</p>
            </div>
            <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
              <img src="./assets/images/player-icon12.png" alt="">
              <p data-lang="c12" class="add">战争之门</p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div> 


  <div class="friend">
    <div class="content">
      <div class="title wow fadeInUp" ata-wow-delay="200ms" data-lang="d1">合作伙伴<span></span></div>
    
      <div class="list container">
        <div class="row">
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon01.png" alt="">
          </div>
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon02.png" alt="">
          </div>
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon03.png" alt="">
          </div>
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon04.png" alt="">
          </div>
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon05.png" alt="">
          </div>
          <div class="col-md-2 wow fadeInUp" ata-wow-delay="240ms">
            <img src="./assets/images/friend-icon06.png" alt="">
          </div>
        </div>
        <div class="row">
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon07.png" alt="">
        </div>
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon08.png" alt="">
        </div>
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon09.png" alt="">
        </div>
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon10.png" alt="">
        </div>
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon11.png" alt="">
        </div>
        <div class="col-md-2 wow fadeInUp" ata-wow-delay="280ms">
          <img src="./assets/images/friend-icon12.png" alt="">
        </div>
        </div>

      </div>
    </div>
  </div>
  <div class="footer" id="footer">
    <div class="content">
      <div class="title">
        <div class="top">
          <div class="wow fadeInUp" ata-wow-delay="200ms" data-lang="d2">公司简介</div>
          <div class="wow fadeInUp" ata-wow-delay="200ms"data-lang="d3">联系方式</div>
          <div class="wow fadeInUp" ata-wow-delay="200ms" data-lang="d4">人才招聘</div>
        </div>
        <div class="btm wow fadeInUp" ata-wow-delay="250ms">
          All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 
        </div>
      </div>
      <div class="list">
        <div class="item wow fadeInUp" ata-wow-delay="250ms">
          <img src="./assets/images/footer-icon01.png" alt="">
          <div class="img">
            <img src="./assets/images/footer-bg.png" alt="">
          </div>  
        </div>
        <div class="item wow fadeInUp" ata-wow-delay="250ms">
          <img src="./assets/images/footer-icon02.png" alt="">
          <div class="img">
            <img src="./assets/images/footer-bg.png" alt="">
          </div> 
        </div>
        <div class="item wow fadeInUp" ata-wow-delay="250ms">
          <img src="./assets/images/footer-icon03.png" alt="">
          <div class="img">
            <img src="./assets/images/footer-bg.png" alt="">
          </div> 
        </div>
      </div>
    </div>
  </div>

</body>
</html>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.repeat.js"></script>
<script>
    new WOW().init();

    $(function(){
              $(".header .head_list a").eq(1).click(function(){
                var scTop = $("#newlist").offset().top;
                $('html,body').stop().animate({
                  scrollTop:scTop
                },800)
              })
              $(".header .head_list a").eq(2).click(function(){
                var scTop = $("#newlist2").offset().top;
                $('html,body').stop().animate({
                  scrollTop:scTop
                },800)
              })

        $("#videoBtn").click(function(){
            var video = document.getElementById("video")
            video.play()
            $(this).fadeOut()
        })
        $("#video").click(function(){
          $("#videoBtn").fadeIn()
          // var video = document.getElementById("video")
          //   video.pause()
        })
        video.addEventListener('ended',function(){
          $("#videoBtn").fadeIn()
        })
        $("#footer .item").each(function(index,item){
            $(this).hover(
              function(){
                $("#footer .img").eq(index).stop().fadeToggle()
              }
            )
        })
    })

</script>
<script>
  //初始化懒加载插件
  // new WOW().init()

  //加入锚点滚动效果
  $(function(){  
      // a href == id 
      //锚点跳转滑动效果  获取 a 当中 href="#"  area href="#" 点击事件
      // a href="#newlist"
      $('a[data-url]').click(function() {  
          //是否重复点击自己
          if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) 
          {  
             //利用a链接href属性 来作为名称 去选中 元素中 id相同的元素   href = id
              var $target = $(this.hash);  

              $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  

              if ($target.length) {  
                  var targetOffset = $target.offset().top;  
                  $('html,body').animate({  
                              scrollTop: targetOffset  
                          },  
                          1000);  
                  return false;  
              }  
          }  
      });  
  })
   //设置默认语言 先要看缓存里面有没有设置
   var current = localStorage.getItem('lang')

//判断是否存在
if(!current)
{
  ///设置一个默认的中文
  localStorage.setItem('lang','zh')
  var current = 'zh'
}

//一进来就触发中英文
SelectLang(current)


//获取所有的语言项目
var $langlist = $("*[data-lang]")


//切换中英文
function SelectLang(lang)
{
  //设置缓存(当前的语言)
  localStorage.setItem('lang',lang)

  //请求语言项文件
  $.ajax({
    url:`./assets/local/${lang}.json`,
    type:"POST",
    dataType:"json",
    success:function(success)
    {
      $langlist.each(function(){
        var langname = $(this).data("lang")
        var content = success[langname]

        $(this).text(content)
      })
    }
  })
}
</script>